<template>
  <div class="div1">
      <div :id="echartsData.title" :style="{width: '100%', height: '90%',background:'transparent'}"></div>
    </div> 
</template>

<script>

import * as echarts from 'echarts';
export default {
    name:"ChartHistogram",
    props: {
                echartsData: {
                    type: Object,
                    default: () => {
                        return {
                        source: {
                            data1:[],
                            data2:[]
                        },
                        title:''
                        }
                    }
                },
            },
    data(){
        return{
            color: ['rgb(250,110,70)','rgb(254,208,60)','rgb(173,220,80)','rgb(50,150,220)','rgb(80,80,235)','white'],
            dataArray:[],
        }
    },
    mounted (){
        this.echartsData.source.data2.forEach(element => {
            this.dataArray.push(element)
          });
        this.initChart(this.echartsData)

    },
    watch:{
        echartsData:{
            handler:function(val,oldVal){
                console.log("echarddd",this.echartsData)
                this.initChart(this.echartsData)
            },
            deep:true
        }
    },
   methods:{
      initChart(dataset) {
        // series.prototype.color=['yellow','red'];
            let bar_data = [12,23]; //模拟数据
          let getchart = echarts.init(document.getElementById(dataset.title));
          console.log('sourece1',dataset.source.data1)
          console.log('dataArray',this.dataArray)
          var  option = {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: dataset.title,
                    padding: [0,0,5,0],
                    textStyle:{
                    color: "rgb(6,203,255)",
                    fontSize:12,
                    lineHeight:15
                },
                    y:'top'
                },

                grid: { //调整图表上下左右位置
                    top:'10%',
                    left: '3%',
                    right: '1%',
                    bottom: '11%',
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal',  //垂直显示
                    y: 'top',    //延Y轴居中
                    x: 'right' ,//居右显示
                    textStyle:{
                        color: "#fff",
                    },
                    itemHeight: 10, // 图例icon高度
                    itemWidth: 10, // 图例icon宽度
                    align: "left",
                    data: dataset.source.data1
                    },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    boundaryGap: [1,0],
                    axisLabel:{color:'rgb(151,171,211)',fontSize:'10'},
                    axisLine:{
                        lineStyle:{color:'rgb(151,171,211)'}    // x轴坐标轴颜色
                        },
                    axisTick: {
                            show: false
                        },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: ['rgb(151,171,211)'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    // boundaryGap: false,
                    // data: dataset.source.data1
                    data:['']
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{color:'rgb(151,171,211)',fontSize:'10'},
                    axisLine:{
                        lineStyle:{color:'rgb(151,171,211)'}    // y轴坐标轴颜色
                        },
                    axisTick: {
                            show: false
                        },
                    splitLine: {
                    lineStyle:{
                        color: ['rgb(151,171,211)'],
                        width: 1,
                        type: 'solid'
                    }
                    },
                    min: 0,
                    max: 20,
                    // data:[20,40,60,80,100],
                },
                color: this.color,
                series:[],
                // series: [
                //         {
                //         data:dataset.source.data2,
                //         type: 'bar',
                //         barWidth: '20%'
                //         }
                //     ]
            };
        for(let i = 0; i< dataset.source.data1.length; i++){
        let style = { //定义柱状图的样式
          normal: {
            label: {
              show: true,
              //柱子上方显示数值
              position: 'top',
              //数值可加上'%'
              formatter: '{c}'
            }
          }
        };
        let temp={};
        //每条数据添加系列名
        temp.name = dataset.source.data1[i];
        //每条数据指定类型为'bar'
        temp.type = 'bar';
        // series中每条数据都加的样式
        temp.itemStyle = style;
        //series 中 data赋值
        temp.data = [dataset.source.data2[i]];
        option.series.push(temp)
        console.log("option.series",i)
      };
    //   console.log("option.series",option.series)
      // 使用刚指定的配置项和数据显示图表。画布为 myCharts  true为显示
      if (option && typeof option === "object") {
        getchart.setOption(option, true);
      }
          //随着屏幕大小调节图表
          window.addEventListener("resize", () => {
            getchart.resize();
        });
      },

    }

}
</script>
<style scoped>
.div1{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    width: 100%;
}
.tips{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}
.lable{
    display: flex;
    color: white;
    width: '33%'; 
    height: '50%';
    font-size: 10px;
}
.text{
    margin-left: 5px;
}
</style>
